<div wire:poll.15s>
    @if($this->watcher)
        <div class="container">
            <div class="row gx-5">
                <div class="col">
                    <div id="chart" style="height: 32rem;">
                        <livewire:livewire-line-chart
                            key="{{ $this->HDDused->reactiveKey() }}"
                            :line-chart-model="$this->HDDused"
                        />
                    </div>
                </div>
                <div class="col">
                    <div id="chart" style="height: 32rem;">
                        <livewire:livewire-line-chart
                            key="{{ $this->CPUused->reactiveKey() }}"
                            :line-chart-model="$this->CPUused"
                        />
                    </div>
                </div>
            </div>

            <div class="row gx-5">
                <div class="col">
                    <div id="chart" style="height: 32rem;">
                        <livewire:livewire-line-chart
                            key="{{ $this->serverCommands->reactiveKey() }}"
                            :line-chart-model="$this->serverCommands"
                        />
                    </div>
                </div>
                <div class="col">
                    @foreach($this->services as $service)
                        <div class="row gy-3">
                          <div class="col-3"> <img src="{{ asset('storage/'.$service->icon)}}"></div>
                          <div class="col-3"> {{ $service->service }}</div>
                        @if($service->interactable)
                                <div class="col-3">
                                    <a class="btn btn-primary" href="{{ route('server.service', ['ip' => $this->server->ip_address,
                'service' => $service->service, 'connection' => 'user:password']) }}" role="button">Управлять</a>
                                </div>
                            @else
                                <div class="col-3">
                                    <button type="button" class="btn btn-secondary">Неуправляемый</button>
                                </div>
                        @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="container h-100">
            <div class="row h-100 justify-content-center align-items-center">
                @if(auth()->user()->role == 'admin')
                    <x-bladewind.button  x-on:click="$wire.deleteWatcher()">Удалить наблюдателя</x-bladewind.button>
                @endif
            </div>
        </div>
    @else
        <div class="container h-100">
            <div class="row h-100 justify-content-center align-items-center">

                @if(auth()->user()->role == 'admin')
                        <x-bladewind.button class="col-12"  x-on:click="$wire.createWatcher()">
                            Создать наблюдателя
                        </x-bladewind.button>
                @endif
            </div>
        </div>
    @endif
    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto);

        body {
            font-family: Roboto, sans-serif;
        }

        #chart {
            max-width: 650px;
            margin: 35px auto;
        }

    </style>
</div>

